<template>
	<div class="userinfo">
		<v-top :top="top"></v-top>
		<div class="info">
			<p class="listTop">请仔细填写正确的个人信息</p>
			<ul>
				<li>
					<span>姓名</span>
					<input type="text" name="name" placeholder="请输入真实姓名" />
				</li>
				<li>
					<span>身份证号</span>
					<input type="text" name="name" placeholder="请输入本人身份证号" />
				</li>
				<li>
					<span>性别 <em></em></span>
					<select>
						<option value=""></option>
						<option value="male">男</option>
						<option value="female">女</option>
					</select>
				</li>
				<li>
					<span>学历 <em></em></span>
					<select>
						<option value=""></option>
						<option value="gz">高中及以下</option>
						<option value="zk">专科</option>
						<option value="bk">本科</option>
						<option value="ss">硕士及以上</option>
					</select>
				</li>
				<li>
					<span>婚姻状态 <em></em></span>
					<select>
						<option value=""></option>
						<option value="w">未婚</option>
						<option value="y">已婚</option>
					</select>
				</li>
			</ul>
			<p class="listTop">联系地址</p>
			<ul>
				<li>
					<span>省 <em></em></span>
					<select>
						<option value=""></option>
						<option value="440000" checkbox="checkbox">四川省</option>
						<option value="340000">安徽省</option>
						<option value="110000">北京市</option>
						<option value="500000">重庆市</option>
						<option value="350000">福建省</option>
						<option value="620000">甘肃省</option>
						<option value="440000">广东省</option>
					</select>
				</li>
				<li>
					<span>市 <em></em></span>
					<select>
						<option value=""></option>
						<option value="511300" checkbox="checkbox">南充市</option>
						<option value="510100">成都市</option>
						<option value="510300">自贡市</option>
						<option value="510400">攀枝花市</option>
						<option value="510500">泸州市</option>
						<option value="510600">德阳市</option>
						<option value="510700">绵阳市</option>
						<option value="510800">广元市</option>
						<option value="510900">遂宁市</option>
						<option value="511000">内江市</option>
						<option value="511100">乐山市</option>
						<option value="511400">眉山市</option>
						<option value="511500">宜宾市</option>
						<option value="511600">广安市</option>
						<option value="511700">达州市</option>
						<option value="511800">雅安市</option>
						<option value="511900">巴中市</option>
						<option value="512000">资阳市</option>
						<option value="513200">阿坝藏族羌族自治州</option>
						<option value="513300">甘孜藏族自治州</option>
						<option value="513400">凉山彝族自治州</option>
					</select>
				</li>
				<li>
					<span>区 <em></em></span>
					<select>
						<option value=""></option>
						<option value="511302">顺庆区</option>
						<option value="511303">高坪区</option>
						<option value="511304">嘉陵区</option>
						<option value="511321">南部县</option>
						<option value="511322">营山县</option>
						<option value="511323">蓬安县</option>
						<option value="511324">仪陇县</option>
						<option value="511325">西充县</option>
						<option value="511381">阆中市</option>
					</select>
				</li>
				<li>
					<span>详细地址</span>
					<input type="text" name="address" placeholder="不必填写省市区" />
				</li>
				<li>
					<span>入住时间</span>
					<input type="date" name="date" />
				</li>
			</ul>
			<div class="agreeMent">
    			<input type="checkbox" mame="" /> 我已阅读并同意<span class="blue">《个人信息收集授权协议》</span> 
    		</div>
		</div>
	</div>
</template>

<script>
import vTop from './public/subTop'
export default {
   	data() {
      	return {
			city : [
				{
					id : 1,
					name : '北京市',
					city : [
						{id: 1, name: '东城区'},
	                	{id: 2, name: '西城区'},
						{id: 3, name: '崇文区'},
	                 ]
 
				}
			],
			top : [
				'个人信息','','保存'
			]
      	}
   	},
   	components : {
   		vTop
   	}
}
</script>

<style lang="">
.userinfo .info{margin-top: 0.44rem;}
.userinfo .listTop{color: #666; font-size: 0.12rem; padding: 8px;}
.userinfo ul{background: #fff; position:relative; overflow: hidden; padding-left: 0.1rem;}
.userinfo ul li{height: 0.39rem; line-height: 0.39rem; border-bottom: 1px solid #e5e5e5; overflow:hidden; cursor: pointer; color: #333;}
.userinfo ul li span{font-size: 0.13rem; display: inline-block; width:20%;}
.userinfo ul li input{width:100%; position: absolute; float: right; vertical-align: middle; height: 0.37rem; border:none; outline: none;}
.userinfo ul li select{border:none; outline:none; -webkit- appearance:none; -o- appearance:none; appearance:none; position: absolute; width:100%; float: right; height:0.37rem; color: #333;}
.userinfo .agreeMent{margin-top: 0.1rem; color: #666; font-size: 0.12rem; text-align: center;}
.userinfo .agreeMent .blue{color: #3297fd;}
.userinfo .agreeMent input{vertical-align: middle; -webkit-appearance:none; -o-appearance:none; appearance:none; width:0.12rem;height: 0.12rem; background: #3297fd;}
</style>
